/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    Image,
    ScrollView,
    TouchableOpacity,
    ListView,
    RefreshControl
} from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import RuralAPIService from "../Commom/RuralAPIService";
import Global from "../Commom/GlobalConst";
import Toast from '../Utils/toast';
import EventDetailsPage from './EventDetailsPage';
export default class ListActivityPage extends Component {
    constructor(props) {
        super(props);
        var dataSourceData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSourceList: dataSourceData,
            aboutWithImage:[{image:require('../../Image/new/image_01.png')},
                {image:require('../../Image/new/image_02.png')},
                {image:require('../../Image/new/image_03.png')}],
            record_count: 1,
            page: 1,
            activityList:[],
            isRefreshing:false
        }
    }
    componentDidMount() {
      this.onRefreshData();
    }
    BackAction() {
        this.props.navigator.pop();
    }
    goActivityDetails(id){
        this.props.navigator.push({
            id: 'EventDetailsPage',
            component: EventDetailsPage,
            passProps: {
                ID:id
            }
        });
    }
    onRefreshData(){
        RuralAPIService.ActivityList(1).then((ret)=> {
            this.setState({
                activityList:ret.result,
                page:ret.page,
                record_count:ret.record_count,
                isRefreshing: false,
            })
        }).catch((err)=> {
        });
    }
    loadMoreData(){
        if (this.state.page < this.state.record_count) {
            this.setState({
                isRefreshing: true,
            });
            RuralAPIService.ActivityList(this.state.page + 1).then((ret)=> {
                this.setState({
                    activityList:this.state.activityList.concat(ret.result),
                    page:ret.page,
                    record_count:ret.record_count,
                    isRefreshing: false,
                })
            }).catch((err)=> {
            });
        } else {
            if (this.state.page != 1) {
                Toast.show('木有更多数据');
            }
        }
    }
    ListDataRow(rowData){
        return(
            <View style={{ backgroundColor: 'white',marginBottom: 10,}}>
                <View style={{width,height:170,justifyContent:'center',alignItems:'center',backgroundColor:'white',marginTop:5}}>
                    <Image style={{width:width-20,height:170,resizeMode:'cover',borderRadius:5}}
                           source={{uri:rowData.images}}
                    />
                </View>
                <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white'}}>
                    <View style={{justifyContent:'center',marginLeft:10,width:width-90,height:40}}>
                        <Text style={{color:'black',fontSize:15,fontWeight:'bold'}}>{rowData.title}</Text>
                        <Text numberOfLines={1} style={{marginTop:3,fontSize:11}}>{rowData.descript}</Text>
                    </View>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress={()=>  this.goActivityDetails(rowData.id)}>
                        <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#24CD78'}}>
                            <Text style={{color:'white',fontSize:11}}>查看详情</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
    render() {
        return (
        <View style={styles.container}>
            <View style={{width,height:64,backgroundColor:'#24CD78',flexDirection:'row',justifyContent:'space-between',paddingTop:20,alignItems:'center'}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.BackAction()}>
                    <View style={{flexDirection:'row',width:40,height:40,marginLeft:10,alignItems:'center',}}>
                        <Image style={{width:17,height:17,resizeMode:'contain',marginLeft:3}}
                               source={require('../../Image/back_icon_white.png')}/>
                    </View>
                </TouchableOpacity>
                <Text style={{color:'white',fontSize:19}}>活动</Text>
                <View style={{flexDirection:'row',width:40,height:40,marginRight:10,justifyContent:'flex-end',alignItems:'center'}}>
                </View>
            </View>
            <ListView
                style={{marginTop:10}}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={() => {this.onRefreshData()}}
                        colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                        progressBackgroundColor="white"
                    /> }
                onEndReachedThreshold={50}
                onEndReached={() => {this.loadMoreData()}}
                enableEmptySections={true}
                dataSource={this.state.dataSourceList.cloneWithRows(this.state.activityList)}
                renderRow={(rowData)=>this.ListDataRow(rowData)}/>
        </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: Global.Const.transparent,
    },
});

